<template>
  <q-dialog
    :model-value="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
    persistent
    :maximized="$q.screen.lt.sm"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card :style="$q.screen.gt.xs ? 'min-width: 800px' : 'width: 100%'">
      <q-bar class="bg-primary text-white">
        <div class="text-h6">{{ isEdit ? '编辑用户' : '新增用户' }}</div>
        <q-space />
        <q-btn dense flat icon="close" v-close-popup />
      </q-bar>

      <q-card-section>
        <q-form @submit="submitForm">
          <!-- 用户名 -->
          <q-input
            v-model="formData.username"
            label="用户名 *"
            :rules="[(val) => !!val || '用户名不能为空']"
            outlined
            dense
            :readonly="isEdit"
            :stack-label="$q.screen.lt.sm"
          />

          <!-- 昵称 -->
          <q-input
            v-model="formData.name"
            label="昵称 *"
            :rules="[(val) => !!val || '昵称不能为空']"
            outlined
            dense
            :stack-label="$q.screen.lt.sm"
          />

          <!-- 邮箱 -->
          <q-input
            v-model="formData.email"
            label="邮箱 *"
            type="email"
            :rules="[
              (val) => !!val || '邮箱不能为空',
              (val) => /.+@.+\..+/.test(val) || '邮箱格式不正确',
            ]"
            outlined
            dense
            :stack-label="$q.screen.lt.sm"
          />

          <!-- 手机号 -->
          <q-input
            v-model="formData.mobile"
            label="手机号 *"
            :rules="[(val) => !!val || '手机号不能为空']"
            outlined
            dense
            :stack-label="$q.screen.lt.sm"
          />

          <!-- 角色选择 -->
          <q-select
            v-model="formData.roleIds"
            label="角色 *"
            :options="roleOptions"
            multiple
            outlined
            dense
            emit-value
            map-options
            use-chips
            :display-value="$q.screen.lt.sm ? `${formData.roleIds.length} 个角色` : null"
            :stack-label="$q.screen.lt.sm"
          />

          <!-- 启用状态 -->
          <q-toggle
            v-model="formData.status"
            label="启用状态"
            :true-value="true"
            :false-value="false"
            left-label
            dense
          />

          <!-- 操作按钮 -->
          <div class="row q-gutter-sm q-mt-md">
            <q-btn
              label="取消"
              v-close-popup
              flat
              color="primary"
              class="col"
              :size="$q.screen.lt.sm ? 'lg' : 'md'"
            />
            <q-btn
              type="submit"
              :label="isEdit ? '保存' : '创建'"
              color="primary"
              class="col"
              :size="$q.screen.lt.sm ? 'lg' : 'md'"
            />
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { addUser, updateUser } from '@/api/sys/user'

const props = defineProps({
  modelValue: Boolean,
  isEdit: Boolean,
  userData: Object,
  roleOptions: Array,
})

const emit = defineEmits(['update:modelValue', 'submit'])

const formData = ref({
  id: null,
  username: '',
  name: '',
  email: '',
  mobile: '',
  status: true,
  deptId: null,
  roleIds: [],
})

// 监听userData变化
watch(
  () => props.userData,
  (newVal) => {
    formData.value = { ...newVal }
  },
  { immediate: true },
)

// 提交表单
async function submitForm() {
  try {
    if (props.isEdit) {
      await updateUser(formData.value)
    } else {
      await addUser(formData.value)
    }
    emit('submit')
    emit('update:modelValue', false)
  } catch (error) {
    console.error('  保存用户失败:', error)
  }
}
</script>
